<script setup lang='ts'>
import {useRouter} from 'vue-router';
import {reactive, ref} from 'vue';
import {
Printer
} from '@element-plus/icons-vue'

const router = useRouter();

const goBack = () => {
    router.go(-1)
}

const result = reactive([{
    "name": "张三",
    "sex": "男",
    "cert": "123",
    "phone": "123",
    "base": "南京",
    "cls": "临床医学",
    "time": "2025",
    "code": "123"
}])

const modal = reactive({
    print: false
})

const columns = reactive([
    {
                name:'姓名',
                key:'name'
            },
            {
                name:'性别',
                key:'sex'
            },
            {
                name:'证件号码',
                key:'cert'
            },
            {
                name:'联系方式',
                key:'phone'
            },
            {
                name:'培训基地',
                key:'base'
            },
            {
                name:'报考专业',
                key:'cls'
            },
            {
                name:'考试时间',
                key:'time'
            },
            {
                name:'准考证号',
                key:'code'
            }
])

function handlePrint(scope) {
    setTimeout(() => {
        window.printInfo = scope.row;
        window.vueObj = this;
        modal.print = true;
    }, 0)
}

// handlePrint(scope) {
//             setTimeout(() => {
//                 window.printInfo = scope.row;
//                 window.vueObj = this;
//                 this.modal.print = true;
//             }, 0)
//         }
</script>
<template>
    <div class="container">
        <img src="@/assets/header.png" style="margin: 6px;" width="220px" height="50px"/>
        <el-card style="margin: 0 12px;">
            <div slot="header" class="clearfix">
                <span><strong>{{$route.query.cert}}</strong>&nbsp;查询结果：</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">重新查询</el-button>
            </div>
            <el-table :data="result" border stripe style="width: 100%;margin: 12px 0;">
                <el-table-column v-for="item of columns" :key="item.cert" :prop="item.key" :label="item.name" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button :icon="Printer" size="small"  @click="handlePrint(scope)"/>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div v-if="modal.print"
         class="print-modal-ver">
            <iframe src="print/word.html"
              style="height: 100%; width: 100%"
              frameborder="0"></iframe>
        </div>
    </div>
</template>

<style scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.print-modal-ver {
    background-color: #fff;
    width: 60vw;
    height: 80vh;
    position: absolute;
    top: 10vh;
    left: 20vw;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    z-index: 10;
}
</style>